<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SimplePractise</title>
</head>
<body>
<form id ="form0">
    <div id="radio-group-1" style="height: 50px">
        <label>
        <input type="radio" id="china" value="CHINA" name="nations">中国
        </label>
        <label>
        <input type="radio" id="usa" value="USA" name="nations">美国
        </label>
        <label>
        <input type="radio" id="france" value="FRANCE" name="nations" checked>法国
        </label>
    </div>
    <div id="radio-group-2" style="height: 50px">

    </div>
    <div id="checkbox-group-1" style="height: 50px">
        <label>
            <input type="checkbox" value="CHINA" name="countries">中国
        </label>
        <label>
            <input type="checkbox" value="USA" name="countries" checked>美国
        </label>
        <label>
            <input type="checkbox" value="FRANCE" name="countries" checked>法国
        </label>
    </div>
</form>
    <div style="height: 300px;width: 600px; background-color: aliceblue">
        <table id="table-1">

        </table>
    </div>

    <div>
        <a id="link-test" href="/product">尝试一个访问</a>
    </div>

    <div style="background-color: cornflowerblue">
        <button id="button-test-0" type="button">第零按钮</button>
        <button id="button-test-1" type="reset">第一按钮</button>
        <button id="button-test-2" type="submit">第二按钮</button>
        <button id="button-test-3" style="display: none">默认不显示</button>
    </div>
    <form id="form-test" action="/user" method="get">
        <input id="form-button-testing" type="button" name="form-button-test" value="button页面">
        <input type="submit" name="form-submit-test" value="submit页面">
        <input type="reset" name="form-reset-test" value="reset页面">
    </form>

<script type="text/javascript">
    var fruitList=["orange","banana","apple","cherry"];
    var personList=[
        {
            name:'张三',
            age:18,
            score:88
        },
        {
            name:'李四',
            age:28,
            score:55
        },
        {
            name:'王五',
            age:38,
            score:77
        }
    ];
    window.onload=function (ev) {
       var e = document.getElementById("radio-group-2");
        for (var i = 0; i < fruitList.length; i++) {
            var radio = document.createElement("input");
            radio.type="radio";
            radio.name="fruits";
            radio.value=fruitList[i];
            var label = document.createElement("label");
            label.innerText=fruitList[i];
            label.appendChild(radio);
            e.appendChild(label);
        }
        var t = document.getElementById("table-1");
        t.innerHTML+='<tr><th>NAME</th><th>AGE</th><th>SCORE</th></tr>';
        for (var i = 0; i < personList.length; i++) {
            t.innerHTML+='<tr>'+
                '<td>'+personList[i].name+'</td>' +
                '<td>'+personList[i].age+'</td>' +
                '<td>'+personList[i].score+'</td>' +
                '</tr>'
        }
    };
</script>


</body>

</html>